<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- layui的核心css-->
    <link rel="stylesheet" href="../css/layui.css">
    <!-- layui的核心js-->
    <script src="../layui.js"></script>
</head>
<body>
    <!-- 
        栅格系统
        列组合
            1.定义行  .layui-row
            2.定义列  .layui-col-md*
                md代表不同屏幕的标识(xs/sm/md/lg)
                *标识列的数量 1-12
            3.每一行均分12列，列的总数不超过12,否则会自动换行
            4.响应式规则：栅格会自动根据屏幕的分辨率选择对应的样式效果
        列边距 .layui-space*
            *代表的是px值(1-30的所有的双数的值)
        列偏移
            将列向右移动指定列数
            .lay-col-md-offset*
            *代表列数

        列嵌套

     -->
    <!-- 布局容器 -->
    <div class="layui-container">
        <!--定义行  -->
        <div class="layui-row">
            <!-- 定义列 -->
            <div class="layui-col-md5" style="background-color: blue;">
                内容的5/12
            </div>
            <div class="layui-col-md7" style="background-color: rgb(156, 175, 48);">
                内容的7/12
            </div>
        </div>
        <div class="layui-row">
            <!-- 定义列 -->
            <div class="layui-col-md4" style="background-color: rgb(255, 0, 242);">
                内容的4/12
            </div>
            <div class="layui-col-md8" style="background-color: rgb(115, 255, 0);">
                内容的8/12
            </div>
            <div class="layui-col-md6" style="background-color: rgb(0, 183, 255);">
                内容的6/12
            </div>
        </div>

        
    <hr>
    <div class="layui-row ">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: rgb(255, 174, 0);">
          移动：6/12 | 平板：6/12 | 桌面：4/12
        </div>
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: rgb(255, 81, 0);">
          移动：6/12 | 平板：6/12 | 桌面：4/12
        </div>
        <div class="layui-col-xs4 layui-col-sm12 layui-col-md4" style="background-color: rgb(0, 255, 85);">
          移动：4/12 | 平板：12/12 | 桌面：4/12
        </div>
        <div class="layui-col-xs4 layui-col-sm7 layui-col-md8" style="background-color: rgb(234, 0, 255);">
          移动：4/12 | 平板：7/12 | 桌面：8/12
        </div>
        <div class="layui-col-xs4 layui-col-sm5 layui-col-md4" style="background-color: rgb(255, 0, 34);">
          移动：4/12 | 平板：5/12 | 桌面：4/12
        </div>
    </div>

    <hr>
    <h3>列边距</h3>
    <div class="layui-row layui-col-space10">
        <div class=" layui-col-md4" style="background-color: rgb(255, 0, 34);">
            4
        </div>
        <div class=" layui-col-md4" style="background-color: rgb(112, 58, 65);">
                4
        </div>
        <div class=" layui-col-md4" style="background-color: rgb(0, 255, 136);">
            4
        </div>
    </div>

    <div class="layui-row layui-col-space10">
        <div class=" layui-col-md4" >
          <div style="background-color: rgb(255, 0, 34);"> 4</div> 
        </div>
        <div class=" layui-col-md4" >
            <div style="background-color: rgb(112, 58, 65);"> 4</div> 
        </div>
        <div class=" layui-col-md4">
            <div  style="background-color: rgb(0, 255, 136);"> 4</div> 
        </div>
    </div>

    <hr>
    <h3>列偏移</h3>
    <div class="layui-row">
        <div class=" layui-col-md4" >
          <div style="background-color: rgb(82, 110, 36);"> 4</div> 
        </div>
        
        <div class=" layui-col-md4 layui-col-md-offset4">
            <div  style="background-color: rgb(255, 0, 179);"> 向右移动4列</div> 
        </div>
    </div>

    <hr>
    <h3>列嵌套</h3>
    <div class="layui-row">
        <div class=" layui-col-md6" >
            <div style="background-color: rgb(41, 36, 110);"> 
                <div class="layui-row">
                    <div class=" layui-col-md3" style="background-color: rgb(255, 0, 34);">
                        内部列
                    </div>
                    <div class=" layui-col-md5" style="background-color: rgb(112, 58, 65);">
                        内部列
                    </div>
                    <div class=" layui-col-md4" style="background-color: rgb(0, 255, 136);">
                        内部列
                    </div>
                </div>
            </div> 
        </div>
        
    </div>

    </div>
</body>
</html>